<template>
  <section class="todoapp">
    <todu-header @add="handAdd"></todu-header>
    <todu-main :list='list2' @del="handDel" @state="handState" @changeAllState="handAllState"></todu-main>
    <todu-footer :list="list" @clearCompleted="handClear" :flag="flag" @changeFlag="val=>{flag=val}"></todu-footer>
  </section>
</template>

<script>
import ToduFooter from './components/ToduFooter.vue'
import ToduHeader from './components/ToduHeader.vue'
import ToduMain from './components/ToduMain.vue'
export default {
  components: { ToduHeader, ToduMain, ToduFooter },
  data(){
  return{
    list: JSON.parse(localStorage.getItem('todo-list'))||[],
    // list:
    //  [
    //   { id: 12, name: '吃饭', isDone: false },
    //   { id: 14, name: '听歌', isDone: true },
    //   { id: 23, name: '洗澡', isDone: true },
    //   { id: 34, name: '睡觉', isDone: false },
    //   { id: 35, name: '游戏', isDone: false },
    //   ],
      flag:1//1全部任务，2进行中，3已完成
    }
  },
  methods:{
    handDel(id){
      // console.log(id);
      this.list=this.list.filter(item=>item.id!==id)
    },
    handAdd(todo){
      // console.log(todo);
      // this.list.push()//向数组末尾添加爱一个元素
      this.list.unshift({id:Date.now(),name:todo,isDone:false})//向数组的开头添加元素
    },
    handState(id){
      // console.log(id);
      const row=this.list.find(item=>item.id===id)
      row.isDone=!row.isDone
    },
    handClear(){
      // isDone=true的是已完成的 清除掉已完成的，就是保留未完成的
      this.list=this.list.filter(item=>item.isDone===false)
    },
    handAllState(boo){
      this.list.forEach(item=>{
        item.isDone=boo//这里是一个等号，赋值
      })
    }
  },
   computed:{
    list2 () {
      if(this.flag===2){
        return  this.list.filter(item=>item.isDone===false)
       }else if(this.flag===3){
           return  this.list.filter(item=>item.isDone===true)
       }else {
        return this.list
      }
    }
  },
  watch:{
    // list(){}
    list:{
      handler(val){
        localStorage.setItem( 'todo-list',JSON.stringify(val))
      },
      // immediate:true//立即侦听
      deep:true//深度侦听（用于侦听对象属性的变化）
    }
    
  }
}
</script>

<style></style>
